<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/one_account.css" rel="stylesheet" />
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init({gestureConfig:{
						tap: true, //默认为true
						doubletap: true, //默认为false
						longtap: true, //默认为false
						swipe: true, //默认为true
						drag: true, //默认为true
						hold:true,//默认为false，不监听
						release:false//默认为false，不监听
			}})
		</script>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的银行卡</h1>
		</header>
		
		<div class="mui-content">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					
					<div id="popover" class="mui-popover">
					      <form class="mui-input-group form_input">
					      	<div class="mui-input-row">
					      		<label>卡片名</label>
					      		<input id="u_account_name" type="text" class="mui-input-clear email" placeholder="请输入卡片名" name="email" id="" value="" />
					      	</div>
					      	<div class="mui-input-row">
					      		<label>卡片号</label>
					      		<input id="u_account_num" type="text" class="mui-input-clear password" placeholder="请输入卡片号" name="email" id="" value="" />
					      	</div>
							<div class="mui-input-row">
								<label>余额</label>
								<input id="u_account_amount" type="text" class="mui-input-clear password" placeholder="请输入余额" name="email" id="" value="" />
							</div>
					      	<div class="mui-button-row submit">
					      		<button id="change" type="button" class="mui-btn mui-btn-primary">修改</button>
					      		<button id="exit" type="button" class="mui-btn mui-btn-danger">取消</button>
					      	</div>
					      </form>
					</div>
					 
					<p id="head_text">长按卡片修改信息</p>
					<div class="my_head">
						<div class="name"></div>
						<div class="num"></div>
					</div>
					<div class="amount"><label style="font-size: 15px; color: #AAAAAA;">余额</label>&nbsp;&nbsp;<label id="account">0.00</label></div>
					<hr />
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-collapse">
							<a href="#" class="mui-navigate-right">关联记录</a>
							<div class="my_body mui-collapse-content">
								<ul class="mui-table-view " v-for="x in data_list">
										<li class="mui-table-view-cell content" v-bind:id="x.detail_id">
											<a class="mui-navigate-right list">
												<label>{{x.detail_type}}</label>&nbsp;
												<label>{{x.time.split('T')[0]}}&nbsp;{{x.time.split('T')[1].split('.')[0]}}</label>
												&nbsp;&nbsp;&nbsp;
												<font v-if="x.detail_type!='收入'">-</font><font v-if="x.detail_type=='收入'">+</font>&nbsp;{{x.detail_num}}
											</a>
										</li>
										
								</ul>
							</div>
						</li>
					</ul>
				</div>	
			</div>
		</div>
		
		<script type="text/javascript">
			
			// 长按修改卡片
			document.getElementsByClassName('my_head')[0].addEventListener('longtap',function(){
				mui('.mui-popover').popover('toggle',);
			})
			
			document.getElementById('change').addEventListener('tap',function(){
				changed()
				mui('.mui-popover').popover('toggle',);
			})
			document.getElementById('exit').addEventListener('tap',function(){
				mui('.mui-popover').popover('toggle',);
			})
			
			
			// 修改信息接口
			function changed(){
				var account_name = document.getElementById('u_account_name').value;
				if(account_name.length<4 | account_name == null){
					mui.toast('请正确填入卡片名称');
					return;
				}
				var account_num = document.getElementById('u_account_num').value;
				var reg1 = /^[1-9]+[0-9]*]*$/
				if(account_num.length !=16 | account_num == null | !reg1.test(account_num)){
					mui.toast('请正确填入卡片号码');
					
					return;
				}
				var account_amount = document.getElementById('u_account_amount').value;
				var reg2 = /^[0-9]+.?[0-9]*$/
				if(!reg2.test(account_amount)){
					mui.toast('请正确填入初始金额');
					
					return;
				}
				// 将数字正确初始化
				var account_amount = parseFloat(account_amount).toFixed(2)
				var token = localStorage.getItem('uid');
				var self = plus.webview.currentWebview();
				var ids = self.ids;//获得参数
				
				mui.ajax(localStorage.getItem('request_url')+'cost/account/change_account/?token='+localStorage.getItem('uid'),{
				    data:"account_name=" + account_name + "&account_num=" + account_num + "&account_amount=" + account_amount + "&token=" + token + "&account_id=" + ids,
				    dataType:'json',  
				    type:'post',  
				    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
				    timeout:60000,  
				    success:function show(e){
						myRefresh()
						mui.toast(e.msg)
					},  
				    error:function(xhr,type,errorThrown){
				        var data = JSON.parse(xhr.responseText)
				        if (data.code==0){
				        	mui.toast('修改失败,您输入信息不符合我们的约定哦')
				        }else{
				        	mui.toast(data.msg)
							mui.toast(data.data.rule)
				        }
				    }  
				});
			}
			
			
			// 从子页面返回刷新-
			window.addEventListener('customEvent', function(event) {
			    // mui.fire()传过来的额外的参数，在event.detail中；
			    var detail = event.detail;
			    // var param = detail.param;
			    // 执行相应的ajax或者操作DOM等操作
				myRefresh();
				mui.toast('重刷')
			});
			
			app = new Vue({
			     el:'.my_body',
			     data:{
			        data_list: '',
			     },
			});
			
			// 重构back函数
			var old_back = mui.back;
			mui.back = function() {
			    // 获取目标口窗口对象
			    var target = plus.webview.getWebviewById('account_list.html');
			    // var target = plus.webview.getWebviewById("my/my.html");
			    // 执行相应的事件
			    mui.fire(target, 'customEvent', {});
			    // 执行关闭
			    old_back();
			};
			
			mui.init({
				pullRefresh : {
					container:"#pullrefresh",
					down: {
						height:50,
						style:'circle',
						auto:true,
						callback:myRefresh
					}
				}
			});
			
			// 给记录加事件
			function getRadioRes(className){
				var rdsObj = document.getElementsByClassName(className);
				var checkVal = null;
				for(i=0; i<rdsObj.length;i++){
					rdsObj[i].addEventListener('tap',function(){
						var ids = this.id
						mui.openWindow({
							url:'one_detail.html',
							id:'one_detail.html',
							extras:{
								de_id:ids,
							},
						})
					})
				}
			};
			
			
			
			// 下拉刷新
			function myRefresh(){
				mui.toast('😐同步数据中...请勿操作', {duration: 200,});
				setTimeout(function(){
					var self = plus.webview.currentWebview();
					var ids = self.ids;//获得参数
					// mui.alert(ids)
					mui.ajax(localStorage.getItem('request_url')+ "cost/account/records/?token="+localStorage.getItem('uid'), {
					    data:"token=" + localStorage.getItem('uid') + "&account=" + ids,
					    dataType:'json',  
					    type:'POST',  
					    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
					    timeout:2000,  
					    success:function show(e){
							app.data_list = e.data.detail
							document.getElementById('account').innerText = e.data.account_amount
							document.getElementsByClassName('name')[0].innerText = e.data.account_name
							document.getElementsByClassName('num')[0].innerText = e.data.account_num
							document.getElementById('u_account_name').value = e.data.account_name
							document.getElementById('u_account_num').value = e.data.account_num
							document.getElementById('u_account_amount').value = e.data.account_amount
							mui.toast('同步完成');
							// 延迟加事件
							setTimeout(function(){
								getRadioRes('content');
								mui.toast('😃同步完成...');
							},1500)
						},  
					    error:function(xhr,type,errorThrown){
							mui.toast('😫同步失败...下拉刷新');
					    }  
					});
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				},200)
			}
		</script>
	</body>

</html>
